<!--系统用户-->
<template>
  <div class="main_box">
    <Tools>
      <template slot="forms">
        <ToolsForm />
      </template>
    </Tools>
    <Action>
      <template slot="actions">
        <el-button type="primary" size="small" @click="handlePlus"
          >新增</el-button
        >
      </template>
    </Action>
    <div class="table_box">
      <el-table :data="tableData" border style="width: 100%" ref="table">
        <el-table-column type="index" label="序号" width="60">
        </el-table-column>
        <el-table-column label="用户名" width="160">
          <template slot-scope="scope">
            {{ scope.row.test }}
          </template>
        </el-table-column>
        <el-table-column label="弹屏电话手机">
          <template slot-scope="scope">
            {{ scope.row.test }}
          </template>
        </el-table-column>
        <el-table-column label="管理的微信号">
          <template slot-scope="scope">
            {{ scope.row.test }}
          </template>
        </el-table-column>
        <el-table-column label="角色">
          <template slot-scope="scope">
            {{ scope.row.test }}
          </template>
        </el-table-column>
        <el-table-column label="账号离线转移手机">
          <template slot-scope="scope">
            {{ scope.row.test }}
          </template>
        </el-table-column>
        <el-table-column label="锁定登录">
          <template slot-scope="scope">
            <ElSwitch v-model="scope.row.status" />
          </template>
        </el-table-column>
        <el-table-column label="最近登录时间">
          <template slot-scope="scope">
            {{ scope.row.test }}
          </template>
        </el-table-column>
        <el-table-column label="上次登录IP" width="160">
          <template slot-scope="scope">
            {{ scope.row.test }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="160">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="handleEdit"
              >编辑</el-button
            >
            <el-button type="danger" size="mini">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <Page />
    <Dialog width="600px" :title="title" :isShow.sync="isShow">
      <template slot="content">
        <el-form label-width="150px" :model="memberForm" size="small">
          <el-form-item label="成员姓名：">
            <el-input />
          </el-form-item>
          <el-form-item label="弹屏电话手机：">
            <el-input />
          </el-form-item>
          <el-form-item label="管理的微信号：">
            <el-select
              v-model="memberForm.weixin"
              multiple
              placeholder="请选择"
            >
              <el-option
                v-for="item in weixinOrigin"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="角色：">
            <el-select v-model="memberForm.role" placeholder="请选择">
              <el-option
                v-for="item in memberRoles"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="账号离线转移手机：">
            <el-input />
          </el-form-item>
          <el-form-item label="锁定登陆：">
            <ElSwitch v-model="memberForm.status" />
          </el-form-item>
          <div class="align_ct" style="margin-top: 30px">
            <el-button type="primary" size="small">确定</el-button>
            <el-button type="default" size="small">取消</el-button>
          </div>
        </el-form>
      </template>
    </Dialog>
  </div>
</template>
<script>
import { Tools, Page, Action } from '@/components/table/index';
import ToolsForm from './comp/toolsForm';
import ElSwitch from '@/components/switch/index';
import Dialog from '@/components/dialog/index';
import { weixinOrigin, memberRoles } from '@/config/index';

export default {
  components: {
    Tools,
    Page,
    Action,
    ToolsForm,
    ElSwitch,
    Dialog,
  },
  data () {
    return {
      tableData: [{ test: 'test', status: true }],
      title: '',
      isShow: false,
      memberForm: {
        status: false
      },
      weixinOrigin: weixinOrigin,
      memberRoles: memberRoles,
    }
  },
  methods: {
    handlePlus () {
      this.title = '成员添加'
      this.isShow = true
    },
    handleEdit () {
      this.title = '成员编辑'
      this.isShow = true
    }
  }
}
</script>
<style lang="scss" scoped>
</style>